import { computed, defineComponent, ref } from 'vue';
import ArrayValue from './ArrayValue.vue';
import CustomValues from './CustomValues.vue';
import DarkBackground from './DarkBackground.vue';
import Disabled from './Disabled.vue';
import Icons from './Icons.vue';
import IndeterminateState from './IndeterminateState.vue';
import KeepColor from './KeepColor.vue';
import Labels from './Labels.vue';
import List from './List.vue';
import NativeForm from './NativeForm.vue';
import OptionGroup from './OptionGroup.vue';
import Standard from './Standard.vue';
import StandardSizes from './StandardSizes.vue';
import ToggleOrder from './ToggleOrder.vue';
import Demo from './1Demo.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
           <div class='block-'>
            <h5 class='title'>Demo</h5>
            <Demo />
          </div>
          <div class='block-'>
            <h5 class='title'>ArrayValue</h5>
            <ArrayValue />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomValues</h5>
            <CustomValues />
          </div>
          <div class='block-'>
            <h5 class='title'>DarkBackground</h5>
            <DarkBackground />
          </div>
          <div class='block-'>
            <h5 class='title'>Disabled</h5>
            <Disabled />
          </div>
          <div class='block-'>
            <h5 class='title'>Icons</h5>
            <Icons />
          </div>
          <div class='block-'>
            <h5 class='title'>IndeterminateState</h5>
            <IndeterminateState />
          </div>
          <div class='block-'>
            <h5 class='title'>KeepColor</h5>
            <KeepColor />
          </div>
          <div class='block-'>
            <h5 class='title'>Labels</h5>
            <Labels />
          </div>
          <div class='block-'>
            <h5 class='title'>List</h5>
            <List />
          </div>
          <div class='block-'>
            <h5 class='title'>NativeForm</h5>
            <NativeForm />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionGroup</h5>
            <OptionGroup />
          </div>
          <div class='block-'>
            <h5 class='title'>Standard</h5>
            <Standard />
          </div>
          <div class='block-'>
            <h5 class='title'>StandardSizes</h5>
            <StandardSizes />
          </div>
          <div class='block-'>
            <h5 class='title'>ToggleOrder</h5>
            <ToggleOrder />
          </div>
        </div>
      );
    };
  },
});
